<template>
	<!-- 我的订单 -->
	<view class="order">
		<!-- 头部 -->
		<view class="navbar">
			<view v-for="(item,index) in navbar" :key="index" :class="currentIndex == index ? 'active' : ''" @click="changeIndex(index)">{{item}}</view>
		</view>
		<!-- 显示区域 -->
		<view class="content">
			<!-- 全部 -->
			<view class="list" v-if="currentIndex == 0">
				<view class="list-item">
					<view class="date">2020-09-07 14:32</view>
					<view class="content">
						<image src="../../static/logo.png" mode="aspectFill"></image>
						<text>晓薇音乐-VIP特色培训班火热报名</text>
					</view>
					<view class="money">
						<view>
							总额：<text>￥88.00</text>
						</view>
						<view>
							全额支付：<text>￥88.00</text>
						</view>
					</view>
					<view class="state">
						<text>订单状态：{{2 | orderState}}</text>
					</view>
				</view>
				<view class="list-item">
					<view class="date">2020-09-07 14:32</view>
					<view class="content">
						<image src="../../static/logo.png" mode="aspectFill"></image>
						<text>晓薇音乐-VIP特色培训班火热报名</text>
					</view>
					<view class="money">
						<view>
							总额：<text>￥88.00</text>
						</view>
						<view>
							全额支付：<text>￥88.00</text>
						</view>
					</view>
					<view class="state">
						<text>订单状态：{{1 | orderState}}</text>
						<view class="btns">
							<view class="cancel">取消订单</view>
							<view class="pay">去付款</view>
						</view>
					</view>
				</view>
				<view class="list-item">
					<view class="date">2020-09-07 14:32</view>
					<view class="content">
						<image src="../../static/logo.png" mode="aspectFill"></image>
						<text>晓薇音乐-VIP特色培训班火热报名</text>
					</view>
					<view class="money">
						<view>
							总额：<text>￥88.00</text>
						</view>
						<view>
							全额支付：<text>￥88.00</text>
						</view>
					</view>
					<view class="state">
						<text>订单状态：{{3 | orderState}}</text>
						<view class="rate">
							去评价
						</view>
					</view>
				</view>
				<view class="list-item">
					<view class="date">2020-09-07 14:32</view>
					<view class="content">
						<image src="../../static/logo.png" mode="aspectFill"></image>
						<text>晓薇音乐-VIP特色培训班火热报名</text>
					</view>
					<view class="money">
						<view>
							总额：<text>￥88.00</text>
						</view>
						<view>
							全额支付：<text>￥88.00</text>
						</view>
					</view>
					<view class="state">
						<text>订单状态：{{4 | orderState}}</text>
					</view>
				</view>
			</view>
			<!-- 待付款 -->
			<view class="list" v-if="currentIndex == 1">
				<view class="list-item">
					<view class="date">2020-09-07 14:32</view>
					<view class="content">
						<image src="../../static/logo.png" mode="aspectFill"></image>
						<text>晓薇音乐-VIP特色培训班火热报名</text>
					</view>
					<view class="money">
						<view>
							总额：<text>￥88.00</text>
						</view>
						<view>
							全额支付：<text>￥88.00</text>
						</view>
					</view>
					<view class="state">
						<text>订单状态：{{1 | orderState}}</text>
						<view class="btns">
							<view class="cancel">取消订单</view>
							<view class="pay">去付款</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 待消费 -->
			<view class="list" v-if="currentIndex == 2">
				<view class="list-item">
					<view class="date">2020-09-07 14:32</view>
					<view class="content">
						<image src="../../static/logo.png" mode="aspectFill"></image>
						<text>晓薇音乐-VIP特色培训班火热报名</text>
					</view>
					<view class="money">
						<view>
							总额：<text>￥88.00</text>
						</view>
						<view>
							全额支付：<text>￥88.00</text>
						</view>
					</view>
					<view class="state">
						<text>订单状态：{{2 | orderState}}</text>
					</view>
				</view>
			</view>
			<!-- 待点评 -->
			<view class="list" v-if="currentIndex == 3">
				<view class="list-item">
					<view class="date">2020-09-07 14:32</view>
					<view class="content">
						<image src="../../static/logo.png" mode="aspectFill"></image>
						<text>晓薇音乐-VIP特色培训班火热报名</text>
					</view>
					<view class="money">
						<view>
							总额：<text>￥88.00</text>
						</view>
						<view>
							全额支付：<text>￥88.00</text>
						</view>
					</view>
					<view class="state">
						<text>订单状态：{{3 | orderState}}</text>
						<view class="rate">
							去评价
						</view>
					</view>
				</view>
			</view>
			<!-- 退款 -->
			<view class="list" v-if="currentIndex == 4">
				<view class="list-item">
					<view class="date">2020-09-07 14:32</view>
					<view class="content">
						<image src="../../static/logo.png" mode="aspectFill"></image>
						<text>晓薇音乐-VIP特色培训班火热报名</text>
					</view>
					<view class="money">
						<view>
							总额：<text>￥88.00</text>
						</view>
						<view>
							全额支付：<text>￥88.00</text>
						</view>
					</view>
					<view class="state">
						<text>订单状态：{{4 | orderState}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbar: ["全部","待付款","待消费","待点评","退款"],
				currentIndex: 0
			}
		},
		methods: {
			changeIndex(index){
				this.currentIndex = index
			}
		},
		filters: {
			orderState(status){
				switch(status){
					case 1:
						return "等待付款"
					case 2:
						return "付款成功"
					case 3:
						return "交易成功"
					case 4:
						return "已退款"
				}
			}
		},
		onLoad(options) {
			this.currentIndex = options.id
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
		.order {
			position: relative;
			.navbar {
				position: fixed;
				left: 0;
				top: var(--window-top);
				z-index: 99;
				width: 100%;
				display: flex;
				height: rpx(41);
				line-height: rpx(41);
				view {
					flex: 1;
					text-align: center;
					font-size: rpx(14);
					background-color: #fff;
					&.active {
						position: relative;
						&::after {
							content: "";
							display: block;
							position: absolute;
							left: 0;
							bottom: 0;
							width: 100%;
							height: rpx(3);
							background-color: #4bdac3;
						}
					}
				}
			}
			.list {
				margin: rpx(41) rpx($uni-margin-left) 0;
				overflow: hidden;
				.list-item {
					margin-top: rpx($uni-margin-top);
					border: 1px solid #ddd;
					background-color: #fff;
					&:last-child {
						margin-bottom: rpx(40);
					}
					.date {
						font-size: rpx(12);
						color: #888;
						height: rpx(30);
						line-height: rpx(30);
						padding-left: rpx(13);
					}
					.content {
						padding: rpx(10) rpx(13);
						border-top: 1px solid #ddd;
						display: flex;
						image {
							width: rpx(151);
							height: rpx(80);
						}
						text {
							font-size: rpx(14);
							margin-left: rpx(11);
						}
					}
					.money {
						border-top: 1px solid #ddd;
						display: flex;
						justify-content: space-between;
						padding: 0 rpx(13);
						line-height: rpx(40);
						height: rpx(40);
						font-size: rpx(14);
						view {
							text {
								color: red;
							}
						}
					}
					.state {
						padding: 0 rpx(13);
						border-top: 1px solid #ddd;
						line-height: rpx(40);
						height: rpx(40);
						display: flex;
						justify-content: space-between;
						align-items: center;
						text {
							font-size: rpx(14);
							color: #888;
						}
						.btns {
							view {
								font-size: rpx(12);
								display: inline-block;
								width: rpx(60);
								height: rpx(22);
								line-height: rpx(22);
								margin-left: rpx(14);
								color: #fff;
								text-align: center;
								border-radius: rpx(4);
							}
							.cancel {
								background-color: #cccccc;
							}
							.pay {
								background-color: #fd5e5e;
							}
						}
						.rate {
							display: inline-block;
							font-size: rpx(12);
							width: rpx(60);
							height: rpx(22);
							line-height: rpx(22);
							color: #fff;
							background-color: #4bdac3;
							border-radius: rpx(4);
							text-align: center;
						}
					}
				}
			}
		}
	}
	
</style>
